@import '../basic/globalVar.scss';
@import '../mixins/index.scss';
@mixin inputSize($size) {
  $height: $--height-default;
  $font-size: $--font-size-default;
  $padding-append: $--button-padding-horizontal-default;
  $padding-input: $--input-padding-horizontal-default;
  @if ($size == 'mini') {
    $height: $--height-mini;
    $font-size: $--font-size-mini;
    $padding-append: $--button-padding-horizontal-mini;
    $padding-input: $--input-padding-horizontal-mini;
  } @else if ($size == 'small') {
    $height: $--height-small;
    $font-size: $--font-size-small;
    $padding-append: $--button-padding-horizontal-small;
    $padding-input: $--input-padding-horizontal-small;
  } @else if ($size == 'large') {
    $height: $--height-large;
    $font-size: $--font-size-large;
    $padding-append: $--button-padding-horizontal-large;
    $padding-input: $--input-padding-horizontal-large;
  }

  font-size: $font-size;
  @include el(source, false) {
    height: $height;
    font-size: $font-size;
    padding-left: $padding-input;
    padding-right: $padding-input;
  }

  //input
  @include el(source-prefix, false) {
    padding-left: $--input-suffix-width;
  }
  @include el(source-suffix, false) {
    padding-right: $--input-suffix-width;
  }
  @include el((prepend, append), false) {
    height: $height;
    padding: 0 $padding-append;

    @include ci(select) {
      height: #{$height - 2px};
      margin: 0 -#{$padding-append + 1px};
      input {
        min-height: auto;
        height: #{$height - 2px};

        &:focus {
          box-shadow: none;
        }
      }
      //@include el(suffix, false){
      //  line-height: #{$height - 2px};
      //}
    }
  }

  @include el((prefix, suffix), false) {
    font-size: $font-size;
  }

  //number
  @include b(number, false, true) {
    @include el(source-prefix, false) {
      padding-left: #{$--input-suffix-width + $padding-input};
    }
    @include el(source-suffix, false) {
      padding-right: #{$--input-suffix-width + $padding-input};
    }
  }
}

@mixin textareaSize($size) {
  $height: $--height-default;
  $font-size: $--font-size-default;
  $padding-input: $--input-padding-horizontal-default;
  @if ($size == 'mini') {
    $height: $--height-mini;
    $font-size: $--font-size-mini;
    $padding-input: $--input-padding-horizontal-mini;
  } @else if ($size == 'small') {
    $height: $--height-small;
    $font-size: $--font-size-small;
    $padding-input: $--input-padding-horizontal-small;
  } @else if ($size == 'large') {
    $height: $--height-large;
    $font-size: $--font-size-large;
    $padding-input: $--input-padding-horizontal-large;
  }
  @include el(source, false) {
    min-height: $height;
    font-size: $font-size;
    padding-left: $padding-input;
    padding-right: $padding-input;
  }
}

@include classNameConnect(input) {
  display: table;
  line-height: normal;
  //transition: border-color $--animation-time ease-in-out;
  position: relative;
  //top: -1px;
  width: 100%;
  //vertical-align: middle;
  border-collapse: separate;

  &:hover,
  &:focus,
  &:active {
    @include el(source, false) {
      border-color: $--color-primary;
    }
  }

  @include el(source, false) {
    display: table-cell;
    outline: none;
    box-sizing: border-box;
    width: 100%;
    vertical-align: middle;
    border-radius: $--border-radius-default;
    background-color: $--color-white;
    border: $--border-default;
    color: $--color-text-default;
    transition: border-color $--animation-time ease-in-out,
      box-shadow $--animation-time ease-in-out;
    position: relative;

    &,
    &:after,
    &:before {
      box-sizing: border-box;
    }

    &::placeholder {
      color: $--color-text-placeholder;
    }

    &:focus {
      border-color: $--color-primary;
      box-shadow: 0 0 0 2px
        mix($--color-primary, $--color-white, $--button-hover-percent);
    }
  }
  @include el(source-prepend, false) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  @include el(source-append, false) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  @include el((prepend, append), false) {
    display: table-cell;
    box-sizing: border-box;
    vertical-align: middle;
    width: 1px;
    position: relative;
    color: $--color-text-icon;
    cursor: default;
    border: $--border-default;
    background-color: $--input-background-color-append-prepend;
    border-radius: $--border-radius-default;

    @include ci(select) {
      vertical-align: middle;
      input {
        background-color: transparent;
        border: none;
        color: $--color-text-icon;
      }
    }
  }
  @include el(prepend, false) {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  @include el((append, append-button), false) {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  @include el((prefix, suffix), false) {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
    text-align: center;
    width: $--input-suffix-width;
    box-sizing: border-box;
    height: calc(100% - 2px);

    @include el((prefix-slot, suffix-slot), false) {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @include el((suffix-icon, prefix-icon), false) {
      width: 100%;
      height: 100%;
      position: relative;
      cursor: pointer;
      &::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    @include el((suffix-step, prefix-step), false) {
      background-color: $--background-color-base;
      &:hover,
      &:focus,
      &:active {
        color: $--color-primary;
      }
    }
    @include el(suffix-step, false) {
      border-left: $--border-default;
    }
    @include el(prefix-step, false) {
      border-right: $--border-default;
    }
    @include el(suffix-step-up, false) {
      position: absolute;
      top: 0;
      left: 0;
      height: 50%;
      width: 100%;
      cursor: pointer;
      border-bottom: $--border-default;
    }
    @include el(suffix-step-down, false) {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 50%;
      width: 100%;
      cursor: pointer;
    }
    @include el(step-disabled, false) {
      color: $--color-text-disabled;
      background-color: $--background-color-disabled;
      cursor: not-allowed;
      &:hover,
      &:focus,
      &:active {
        color: $--color-text-disabled;
      }
    }
  }
  @include el(prefix, false) {
    left: 1px;
  }
  @include el(suffix, false) {
    right: 1px;
  }
  @include el(suffix-limit, false) {
    height: calc(100% - 2px);
    position: absolute;
    padding-right: 10px;
    padding-left: 10px;
    top: 50%;
    right: 1px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    text-align: right;
    background-color: $--color-white;
    color: $--color-text-icon;
  }

  @include b(mini) {
    @include inputSize(mini);
  }
  @include b(small) {
    @include inputSize(small);
  }
  @include b(default) {
    @include inputSize(default);
  }
  @include b(large) {
    @include inputSize(large);
  }
  //抵消 size 带来的padding
  @include el(append-button-wrap, false) {
    padding: 0;
    border: none;
    background-color: transparent;
  }

  @include when(disabled) {
    cursor: not-allowed;
    @include el(source, false) {
      cursor: not-allowed;
      background-color: $--background-color-disabled;
      border-color: $--border-color-disabled;
      color: $--color-text-disabled;

      &:hover,
      &:focus,
      &:active {
        border-color: $--border-color-disabled;
      }
    }

    @include el((prefix-icon, suffix-icon), false) {
      cursor: not-allowed;
      color: $--color-text-disabled;
      &:hover,
      &:focus,
      &:active {
        color: $--color-text-disabled;
      }
    }
  }
}

@include classNameConnect(textarea) {
  display: inline-block;
  width: 100%;
  line-height: normal;
  transition: all $--animation-time ease-in-out;
  position: relative;
  //vertical-align: middle;
  border-collapse: separate;

  @include el(source, false) {
    max-width: 100%;
    width: 100%;
    vertical-align: middle;
    outline: none;
    box-sizing: border-box;
    transition: all $--animation-time ease-in-out;
    height: auto;
    border-radius: $--border-radius-default;
    background-color: $--color-white;
    border: $--border-default;
    padding-top: $--input-padding-vertical-default;
    padding-bottom: $--input-padding-vertical-default;
    color: $--color-text-default;

    &::placeholder {
      color: $--color-text-placeholder;
    }

    &:hover,
    &:focus,
    &:active {
      border-color: $--color-primary;
    }

    &:focus {
      box-shadow: 0 0 0 2px
        mix($--color-primary, $--color-white, $--button-hover-percent);
    }
  }

  @include el(suffix-limit, false) {
    position: absolute;
    padding: 5px 10px;
    bottom: 1px;
    right: 1px;
    color: $--color-text-icon;
  }

  @include when(disabled) {
    cursor: not-allowed;
    @include el(source, false) {
      cursor: not-allowed;
      background-color: $--background-color-disabled;
      border-color: $--border-color-disabled;
      color: $--color-text-disabled;

      &:hover,
      &:focus,
      &:active {
        border-color: $--border-color-disabled;
      }
    }
  }

  @include b(mini) {
    @include textareaSize(mini);
  }

  @include b(small) {
    @include textareaSize(small);
  }

  @include b(default) {
    @include textareaSize(default);
  }

  @include b(large) {
    @include textareaSize(large);
  }
}
